<template>
  <div ref="container"></div>
</template>

<script setup lang="ts">
import * as d3 from 'd3';
import {onMounted, ref} from 'vue'

const container = ref<HTMLDivElement|null>(null)
const randomColor = ()=>{
  return `rgb(${Math.round(Math.random()*255)},${Math.round(Math.random()*255)},${Math.round(Math.random()*255)})`
}


onMounted(() => {
  if(!container.value) return;
  const svg = d3.select(container.value).append("svg")
  .attr("width",960)
  .attr("height",500)
  .attr("viewBox","0 0 960 500")

  // 数据驱动 - 核心
  svg.selectAll("circle")
  // 数据绑定
  .data([32,57,112,293])
  .join("circle")
  .attr("cx",(d,i) => i * 100 + 30)
  .attr("cy",(d)=>300-Math.sqrt(d))
  .attr("r",(d)=>Math.sqrt(d))
  .attr("fill",randomColor)
  .enter()
  .exit()

});
</script>

<style scoped>

</style>